<template>
  <el-card>
    <el-alert :title="`共${total}条信息`" type="info" :closable="false" show-icon>
    </el-alert>
    <!---------------------- 表格-------------- -->
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="array" label="操作类型" width="120">
      </el-table-column>
      <el-table-column prop="name" label="操作人" width="180">
      </el-table-column>
      <el-table-column prop="title" label="执行结果" width="480">
      </el-table-column>
      <el-table-column prop="timer" label="操作时间" width="380"> </el-table-column>
      <el-table-column prop="number" label="描述" width='200'> </el-table-column>
    </el-table>
    <!-- ---------------------分页 ---------------------------->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <div class="block"> 
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[4, 6, 10, 20]"
          :page-size="queryData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-row>
  </el-card>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      total:0,
      list: [],
      queryData:{
        page: 1,
        pagesize: 10,
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let {data} = await axios({
        url: "/vue-admin-template/table",
        method: "get",
        data: this.queryData
      });
       console.log(data);
      this.list = data.Data.items
      this.total  = data.total
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryData.page = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryData.pagesize = val
      this.initData()
    },
  },
};
</script>

<style></style>
